<template>
  <div class="row">
    <div class="col-sm-12 col-md-8">
      <!-- new pizza -->
      <app-new-pizza></app-new-pizza>
    </div>
    <div class="col-sm-12 col-md-4">
      <!-- 品种展示 -->
      <h3 class="text-muted my-5">菜单</h3>
      <table class="table">
        <thead class="table table-default">
          <tr>
            <th>品种</th>
            <th>删除</th>
          </tr>
        </thead>
        <tbody v-for="item in getMenuItems" :key="item.name">
          <tr>
            <td>{{item.name}}</td>
            <td>
              <button @click="deleteData(item)" class="btn btn-outline-danger btn-sm">&times;</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import NewPizza from './NewPizza.vue'
  export default{
    data(){
      return{
//      getMenuItems:[]
      }
    },
    components:{
      'app-new-pizza':NewPizza
    },
    computed:{
    	getMenuItems:{
    		//在vuex中获取数据
    		get(){
//  			return this.$store.state.menuItems;
    			//使用getters获取数据
    			return this.$store.getters.getMenuItems;
    		},
    		set(){
    			
    		}
    	}
    },
    created(){
    	
      fetch("https://wd9643367210kyuesx.wilddogio.com/menu.json")
          .then(res => {
            return res.json()
          })
          .then(data => {
            // console.log(data)
            let menuArray = []
            for(let key in data){
              // console.log(key)
              // console.log(data[key])
              data[key].id = key
              menuArray.push(data[key])
            }
            //使用vuex同步数据
            this.$store.commit("setMenuItems",menuArray);
            
//          this.getMenuItems = menuArray
          })
    },
    methods:{
    	//使用vuex同步数据
    	deleteData(item){
    		this.$http.delete("https://wd9643367210kyuesx.wilddogio.com/menu/"+item.id+"/.json")
    		.then((res)=>{
//  			this.$router.push("/Menu");
    			//使用vuex同步数据
           this.$store.commit("removeMenuItems",item);
    		})
    	}
    	
//    deleteData(item){
//      fetch("https://wd9643367210kyuesx.wilddogio.com/menu/"+item.id+"/.json",{
//        method:"DELETE",
//        headers:{
//          'Content-type':'application/json'
//        }
//      })
//      .then(res => res.json())
//      .then(data => this.$router.push("/Menu"))
//      .catch(err => console.log(err))
//    }
    }
  }

</script>


